<template>
  <div style="diaplay: flex; flex-direction: column; width: 100%; height: 100%">
    <div class="menu">
      <el-radio-group v-model="menu"  @change="change">
        <el-radio label="出厂水" ></el-radio>
        <el-radio label="末梢水"></el-radio>
      </el-radio-group>
    </div>
    <div id="mainPH" style="width: 100%; height: 100%"></div>
  </div>

</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  props:['dayProducedWaterQuality'],
  data() {
    return {
      menu:'出厂水',
      chart: null,
      factoryWaterData:[{
        name:'达标',
        value:40,
      },{
        name:'超标',
        value:30,
      },{
        name:'不达标',
        value:15,
      },{
        name:'异常总量',
        value:15,
      }],
      endWaterData:[{
        name:'达标',
        value:48,
      },{
        name:'超标',
        value:35,
      },{
        name:'不达标',
        value:10,
      },{
        name:'异常总量',
        value:7,
      }],
    }
  },
  watch: {
    // dayProducedWaterQuality(){
    //
    //   // this.chartData=[]
    //   // for (let i in this.waterSoledRatio){
    //   //   this.chartData.push(this.waterSoledRatio[i])
    //   // }
    //   this.initChart()
    // },
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val);
    //   },
    // },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart(this.factoryWaterData)
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    change(val){
      if (val === '出厂水'){
        this.initChart(this.factoryWaterData)
      }else if (val === '末梢水'){
        this.initChart(this.endWaterData)
      }
    },
    initChart(data) {
      if(!this.chart ){
      this.chart = echarts.init(document.getElementById("mainPH"), 'macarons')
      }
      this.chart.setOption ({
        // backgroundColor: '#fff',
        // title: {
        //   text: '出厂水',
        //   textStyle: {
        //     // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        //     // fontWeight: "bolder",
        //     fontSize: 12,
        //     color: "#ffffff",
        //   },
        // },
        color: ['rgba(25, 255, 162, 0.7)','rgba(255, 218, 51, 0.7)','rgba(77, 205, 243, 0.7)','rgba(255, 0, 0, 0.7)'],

        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   data:[ '达标','超标','不达标','异常总量'],
        // },
        // legend: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 0,
        //   top:20,
        //   itemGap: 1,
        //   iconWidth:5,
        //   iconHeight:5,
        //   iconStyle: {
        //     width:0,
        //     height:0
        //   },
        //   data:[ '达标','超标','不达标','异常总量'],
        //   textStyle: {
        //     fontFamily: 'Arial',
        //     fontSize: 10,
        //     color: "#ffffff",
        //   }
        //
        // },
        tooltip: {
          // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
          trigger: 'item',
          showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          hideDelay: 20,   // 隐藏延迟，单位ms
          // formatter设置提示框显示内容
          // {a}指series.name  {b}指series.data的name
          // {c}指series.data的value  {d}%指这一部分占总数的百分比
          formatter: '{a} <br/>{b} : {c}个 ({d}%)'
        },
        // radiusAxis: {
        // type: 'category',
        // data: ['a', 'b', 'c', 'd']
        // },
        series: [
          {
            type: 'pie', // 类型： 饼图
            data: data,//数据
            label: {//饼图文字的显示
              show: true, //默认  显示文字
              textStyle: {            // 提示文字的样式
                color: '#ffffff',
                fontSize: 10
              },
              // padding:[0,-55],
              position: 'inside',
              formatter: function (arg) {
                return arg.percent+'%'
              }
            },
            // radius: 20 ,//饼图的半径
            radius: '60%', //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
            // 圆环
            // radius: ['50%','80%']
            center:['55%','50%'],
            // 南丁格尔图  饼图的每一个部分的半径是不同的
            // roseType: 'radius',
            // selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离
            selectedOffset: 30
          },
          {
            type: 'pie', // 类型： 饼图
            data: data,//数据
            labelLine:{
              normal:{
                length:10,
                length2:5,
                lineStyle: {
                }
              },
            },
            label: {//饼图文字的显示
              show: true, //默认  显示文字
              textStyle: {            // 提示文字的样式
                color: '#ffffff',
                fontSize: 10
              },
              padding:[0,-10],
              // position: 'inside',
              formatter: function (arg) {
                console.log(arg);
                return arg.name
              }
            },
            // radius: 20 ,//饼图的半径
            radius: '60%', //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
            // 圆环
            // radius: ['50%','80%']
            center:['55%','50%'],
            // 南丁格尔图  饼图的每一个部分的半径是不同的
            // roseType: 'radius',
            // selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离
            selectedOffset: 30
          }
        ]
      });
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio__inner{
  width: 8px;
  height: 8px;
}
::v-deep .el-radio__label{
  font-size: 8px;
}
.menu{
  position: relative;
  top:-5px;
  text-align: center;
  height: 15px;
}
</style>
